<template>
  <div class="ceshi">
    <el-drawer :close-on-click-modal="false" class="hm-drawer" size="70%" direction="rtl" v-model="show"
      :before-close="handleClose">
      <template #header>
        <div class="hm-box-title">审批记录详情</div>
      </template>

      <div class="screen">
        <div :class="screenIndex == index ? 'screen_div_hover' : 'screen_div'" v-for="(item, index) in screenList"
          :key="index" @click="navClick(item.id, index)">
          {{ item.name }}
        </div>
      </div>

      <div class="hm-form-item-box1">
        <div class="hm-form-title" id="commodity_information" style=" position: relative; ">基本信息</div>

        <div class="hm-form-mechanism">
          <div class="mechanism_flex">
            <div class="mechanism_div">
              <div class="title">商品名称：</div>{{
                commoditydetailsData.styleName
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">商品69码：</div>{{
                commoditydetailsData.styleCode
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">商品编码：</div>{{
                commoditydetailsData.id
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">品牌：</div>{{
                commoditydetailsData.brandName
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">库存编码：</div>{{
                commoditydetailsData.stockCode
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">类目：</div>
              <div class="value">{{
                commoditydetailsData.productCategoryName
              }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">规格/材质：</div>
              <div class="value">{{
                commoditydetailsData.specs
              }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">对接群名：</div>
              <div class="value">{{
                commoditydetailsData.groupName
              }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">选品部门：</div>
              <div class="value">{{
                commoditydetailsData.coreName
              }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">贸易方式：</div>{{
                commoditydetailsData.tradeMode
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">货架号：</div>{{
                commoditydetailsData.locationName
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">能否破价：</div>
              <div class="value">{{
                commoditydetailsData.discountPrice
              }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">历史最低售价：</div>
              <div class="value">{{
                commoditydetailsData.historyPrice
              }}</div>
            </div>
            <div class="mechanism_div">
              <div class="title">招商入库数量：</div>
              <div class="value">{{
                Number(commoditydetailsData.inStockNum) || ''
              }}</div>
            </div>
            <div class="mechanism_wrap">
              <div class="title">卖点：</div>
              <div class="value">{{
                commoditydetailsData.sellingPoints
              }}</div>
            </div>
            <div class="mechanism_wrap">
              <div class="title">售卖主播：</div>
              <div class="value">{{ commoditydetailsData.sellCore }}</div>
            </div>
            <div class="mechanism_img">
              <div class="title">商品图片：</div>
              <div class="value" v-if="commoditydetailsData.productImage">
                <div class="img_div" v-for="(item, index) in commoditydetailsData.productImage.split(',')" :key="index">
                  <image-preview :src="item" :width="190" :height="130" />
                </div>
              </div>
            </div>
            <div class="mechanism_img">
              <div class="title">产品实拍：</div>
              <div class="value" v-if="commoditydetailsData.stockImage">
                <div class="img_div" v-for="(item, index) in commoditydetailsData.stockImage.split(',')"
                  :key="index">
                  <image-preview :src="item" :width="190" :height="130" />
                </div>
              </div>
            </div>
            <div class="liveShot">
              <div class="liveShot_text">备注：</div>
              <div class="liveShot_context">{{ commoditydetailsData.inAuditRemark }}</div>
            </div>
          </div>
        </div>

        <div class="hm-form-title" id="collaboration_information">合作信息</div>
        <el-row class="content_div_cooperationMode">
          <el-col :span="24">
            <div class="hm-form-mechanism">
              <div class="mechanism_flex">
                <div class="mechanism_div">
                  <div class="title">招商部：</div>{{ commoditydetailsData.recruiterDeptName
                  }}
                </div>
                <div class="mechanism_div">
                  <div class="title">招商员：</div>{{ commoditydetailsData.recruiterUserName
                  }}
                </div>
                <div class="mechanism_div">
                  <div class="title">是否走仓：</div>{{ commoditydetailsData.warehouse == 0 ?
                    '否'
                    : '是' }}
                </div>
              </div>
            </div>
            <div class="hm-form-mechanism" v-for="(item, index) in commoditydetailsData.hmStockMechanismsList"
              :key="index">
              <div class="mechanism_title" v-if="item.cooperationMode">{{ '机制' + (index + 1)
                }}：</div>
              <div class="mechanism_flex" v-if="item.cooperationMode">
                <div class="mechanism_div">
                  <div class="title">合作方式：</div>{{ item.cooperationMode }}
                </div>
                <div class="mechanism_div" v-if="item.cooperationMode == '分佣'">
                  <div class="title">售价：</div>{{ item.price }}
                </div>
                <div class="mechanism_div" v-if="item.cooperationMode == '分佣'">
                  <div class="title">佣金：</div>{{ item.commission ? item.commission + '%' :
                    '-' }}
                </div>
                <div class="mechanism_div">
                  <div class="title">直播机制：</div>{{ item.liveStreamingMechanism || '-' }}
                </div>
                <div class="mechanism_div">
                  <div class="title">成本价：</div>{{ item.costPrice || '-' }}
                </div>
                <div class="mechanism_div" v-if="item.cooperationMode == '分佣'">
                  <div class="title">补充佣金：</div>{{ item.brokerage ? item.brokerage + '%' :
                    '-' }}
                </div>
              </div>
            </div>

          </el-col>
        </el-row>

        <div class="hm-form-title" id="merchant_information">商家信息</div>
        <el-row>
          <el-col :span="24">
            <div class="hm-form-mechanism">
              <div class="mechanism_flex">
                <div class="mechanism_div">
                  <div class="title">商家名：</div>{{
                    commoditydetailsData.supplierVo?.supplierName
                  }}
                </div>
                <div class="mechanism_div">
                  <div class="title">联系人：</div>{{ commoditydetailsData.supplierVo?.contactName
                  }}
                </div>
                <div class="mechanism_div">
                  <div class="title">联系方式：</div>{{ commoditydetailsData.supplierVo?.phone }}
                </div>
                <div class="mechanism_div">
                  <div class="title">供销合同：</div><a style="color: #0094FF"
                    @click="previewContract(commoditydetailsData.supplierVo?.contractList || [], '供销合同')">
                    {{
                      getContract(commoditydetailsData.supplierVo?.contractList || [], '供销合同')
                    }}
                  </a>
                </div>
                <div class="mechanism_div">
                  <div class="title">破价合同：</div> <a style="color: #0094FF"
                    @click="previewContract(commoditydetailsData.supplierVo?.contractList || [], '破价合同')">
                    {{
                      getContract(commoditydetailsData.supplierVo?.contractList || [], '破价合同')
                    }}
                  </a>
                </div>
                <div class="mechanism_div">
                  <div class="title">保证金协议：</div><a style="color: #0094FF"
                    @click="previewContract(commoditydetailsData.supplierVo?.contractList || [], '保证金协议')">
                    {{
                      getContract(commoditydetailsData.supplierVo?.contractList || [],
                        '保证金协议')
                    }}
                  </a>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>


        <div class="hm-form-title" id="supplement_message">直播补充信息</div>
        <div class="hm-form-mechanism">
          <div class="mechanism_flex">
            <div class="mechanism_div">
              <div class="title">发货时间：</div>{{
                commoditydetailsData.deliveryTime
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">发货地：</div>{{
                commoditydetailsData.placeDelivery
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">物流/快递：</div>{{
                commoditydetailsData.logistics
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">适用人群：</div>{{
                commoditydetailsData.eligibility
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">厂家可用库存：</div>{{
                commoditydetailsData.factoryStockNum
              }}
            </div>
            <div class="mechanism_div">
              <div class="title">不发货地区：</div>
              <div class="value">{{
                commoditydetailsData.noSendArea
              }}</div>
            </div>
          </div>
        </div>

        <!-- 审批信息 -->
        <div class="hm-form-title" id="review_information">审批信息</div>
        <div class="pricing_information">
          <div class="pricing_proposal">
            <el-radio-group v-model="qualificationsStatus" @change="qualificationsradioChange">
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="0">驳回</el-radio>
            </el-radio-group>
            <el-input maxlength="50" show-word-limit v-model="qualificationsAuditRemark"
              v-if="qualificationsStatus == 0" :rows="5" type="textarea" placeholder="请输入驳回建议（必填），限制50字以内；" />
            <div style="margin-top: 10px;">
              <el-input-number v-if="qualificationsStatus == 1" v-model="passNum" :min="1" :max="999" />
            </div>
          </div>

          <div class="findings_audit_content">
            <div class="column" v-for="(item, index) in logList" :key="index">
              <div class="circle" :style="computedStyle(index, item)"></div>
              <div v-if="index !== logList.length - 1" class="line"></div>
              <div class="column_top">
                <div class="adopt_proposal">{{
                  item.name
                }}
                </div>
                <div class="adopt_proposals"
                  :style="{ 'color': item.des == '审批驳回' ? '#FC2540' : item.des == '审批通过' ? '#19d11b' : '' }">
                  {{ item.des }}
                </div>
                <div class="danger_date">
                  {{ item.time }}
                </div>
              </div>
              <div class="contents"
                :style="{ background: item.auditStatus !== 1 ? 'linear-gradient(#FBFCFE 0%, #EFF6FF 100%)' : 'linear-gradient(#FEFBFB 0%, #FFEFEF 100%)' }">
                <div class="contents_item">
                  <div :class="item.auditStatus !== 1 ? 'consent_font' : 'reject_font'">
                    {{ item.title }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div>
          <el-button type="primary" @click="confirmClick" :loading="loading">完成</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
<script setup name="commoditymodify" lang="ts">
import { sampleAuditrefuse, sampleAuditpass } from '@/api/group/productSelectionPricing';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

// 审批状态
const qualificationsStatus = ref(1);
// 审批驳回remark
const qualificationsAuditRemark = ref();
// 审批通过数量
const passNum = ref(1)
const props = defineProps({
  commoditydetailsData: {
    type: Object,
    default: ''
  },
  dialogInfoVisible: {
    type: Boolean,
    default: false
  }
});
const screenList = ref([
  { name: '基本信息', id: '#commodity_information' },
  { name: '合作信息', id: '#collaboration_information' },
  { name: '商家信息', id: '#merchant_information' },
  { name: '直播补充信息', id: '#supplement_message' },
  { name: '审批信息', id: '#review_information' }
]);
const loading = ref(false);
const screenIndex = ref(0);
const navClick = (id: string, index: number) => {
  const info: any = document.querySelector(id);
  info.scrollIntoView({ behavior: 'smooth' });
  screenIndex.value = index;
};
const logList: any = computed(() => {
  props.commoditydetailsData.hmSampleAuditLogVos.forEach((item: any) => {
    item.title = auditStatusNameById(item.auditStatus, item.requestSampleNum, item.auditRefuseRemark, item.passNum);
    item.name = handleName(item.auditStatus, item.requestDeptName, item.auditUserName);
    item.time = handleTimes(item.auditStatus, item.auditPassTime, item.auditRefuseTime, item.requestTime);
    item.des = handledes(item.auditStatus);
  });
  return props.commoditydetailsData.hmSampleAuditLogVos
});
/** 资质切换状态 */
const qualificationsradioChange = (value: number) => {
  qualificationsAuditRemark.value = ''
  passNum.value = 1
};

/** 处理不同状态回显的时间 */
const handleTimes = (auditStatus: string, auditPassTime: string, auditRefuseTime: string, requestTime: string) => {
  if (auditStatus == '0') {
    return requestTime;
  } else if (auditStatus == '1') {
    return auditRefuseTime;
  } else {
    return auditPassTime;
  }
};
/** 处理不同状态回显的文字 */
const handledes = (auditStatus: string) => {
  if (auditStatus == '0') {
    return '发起审批';
  } else if (auditStatus == '2') {
    return '审批通过';
  } else {
    return '审批驳回';
  }
};
/** 处理不同状态回显的文字 */
const auditStatusNameById = (auditStatus: string, requestSampleNum: string, auditRefuseRemark: string, passNum: string) => {
  if (auditStatus == '0') {
    return '邀约数量：' + Number(requestSampleNum) + '件'
  } else if (auditStatus == '1') {
    return auditRefuseRemark
  } else {
    return '补样数量：' + Number(passNum) + '件'
  }
};
/** 处理不同状态回显的名字 */
const handleName = (auditStatus: string, requestDeptName: string, auditUserName: string) => {
  if (auditStatus == '0') {
    return requestDeptName;
  } else {
    return auditUserName;
  }
};

// 完成
const confirmClick = async () => {
  if (qualificationsStatus.value == 0) {
    // 资质审核=>资审驳回
    if (!qualificationsAuditRemark.value) {
      proxy?.$modal.msgError('请输入驳回建议');
      return;
    }
  }
  await proxy?.$modal.confirm('是否确认提交审核结果?');
  loading.value = true;
  try {
    // 驳回
    if (qualificationsStatus.value == 0) {
      await sampleAuditrefuse({ id: props.commoditydetailsData.id, auditRefuseRemark: qualificationsAuditRemark.value, productId: props.commoditydetailsData.productId })
    } else {
      await sampleAuditpass({ id: props.commoditydetailsData.id, passNum: passNum.value, productId: props.commoditydetailsData.productId, coreDeptId: props.commoditydetailsData.requestDeptId })
    }
    proxy?.$modal.msgSuccess('审核成功');
    handleClose();
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

/** 计算球得颜色 */
const computedStyle = (index: number, item: any) => {
  if (logList.value.length == index + 1) {
    return {
      border: '1px solid #109AFF'
    };
  } else {
    if (item.auditStatus == 0) {
      return {
        'background-color': '#109AFF'
      };
    } else if (item.auditStatus == 1) {
      //驳回
      return {
        'background-color': '#FC2540',
        border: 'none'
      };
    } else {
      return {
        'background-color': '#19d11b',
        border: 'none'
      };
    }
  }
};
// 合同反显
const getContract = (arr: any, type: string) => {
  const data = arr.find((item: any) => {
    return item.contractType == type;
  });
  return data?.fileName || '';
};
// 预览合同
const previewContract = async (arr: any, type: string) => {
  const data = arr.find((item: any) => {
    return item.contractType == type;
  });
  window.open(import.meta.env.VITE_APP_PIC_URL + data?.contractFile, '_blank');
};

const show = computed(() => props.dialogInfoVisible);
const emits = defineEmits(['doClose']);
const handleClose = () => {
  qualificationsAuditRemark.value = '';
  qualificationsStatus.value = 1;
  passNum.value = 1
  emits('doClose');
};
onMounted(() => { });
</script>
<style lang="scss" scoped>
:deep(.el-input-number__decrease) {
  border-left: var(--el-border) !important;
}

.hm-form-title {
  font-size: 16px;
  font-weight: bold;
  color: #1a1b1c;
  margin-bottom: 10px;
}

.hm-drawer .el-drawer__header {
  margin-bottom: 0px !important;
}

.mb96 {
  margin-bottom: 10px;
}

:deep(.el-drawer__body) {
  overflow-x: hidden !important;
}

.hm-box-title {
  font-weight: 600;
  font-size: 21px;
  color: #1c1d1e;
  margin-bottom: 44px;
}

:deep(.el-drawer__body) {
  margin-top: 5px;
  padding-top: 0 !important;
}

:deep(.el-descriptions) {
  height: 100%;
}

.screen {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: fixed;
  z-index: 1;
  top: 50px;

  .screen_div {
    width: 106px;
    height: 44px;
    background: #ebf7ff;
    text-align: center;
    line-height: 44px;
    font-weight: 500;
    font-size: 14px;
    color: #0094ff;
  }

  .screen_div_hover {
    width: 106px;
    height: 44px;
    background: #0094ff;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    line-height: 44px;
  }
}

.mechanism_flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;

  .mechanism_div {
    margin-bottom: 15px;
    width: calc(100% / 3);
    display: flex;
    align-items: center;
    color: var(--bTextColor);
    font-size: 14px;

    .title {
      font-size: 14px;
      color: var(--bTextColor);
      width: 130px;
    }

    .value {
      width: calc(100% - 130px);
      word-break: break-all;
    }
  }

  .mechanism_divs {
    width: 100% !important;

    .titles {
      font-size: 14px;
      color: #303133;
      width: 200px;
    }

    .values {
      width: calc(100% - 200px);
      word-break: break-all;
    }
  }

  .mechanism_wrap {
    margin-bottom: 15px;
    width: 100%;
    display: flex;
    align-items: center;
    color: var(--bTextColor);
    font-size: 14px;

    .title {
      font-size: 14px;
      color: var(--bTextColor);
      width: 100px;
    }

    .value {
      width: calc(100% - 100px);
      display: flex;
      align-items: center;

      .examine_item {
        width: 85px;
        height: 22px;
        background: #e7fdee;
        border-radius: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 12px;
        color: #19d11b;
        line-height: 22px;
        margin-right: 10px;

        img {
          width: 14px;
          height: 14px;
          margin-left: 5px;
        }
      }
    }
  }

  .liveShot {
    margin-top: 15px;
    display: flex;
    min-height: 30px;

    .liveShot_text {
      font-size: 14px;
      color: var(--bTextColor);
      width: 130px;
    }

    .liveShot_img {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-wrap: wrap;

      .liveShot_img_item {
        width: 318px;
        height: 260px;
        padding: 5px;

        .img {
          width: 100%;
          height: 100%;
          border: 1px solid #000;
        }
      }
    }

    .liveShot_context {
      flex: 1;
      min-width: 0;
      padding-right: 10px;
      word-break: break-all;
      font-size: 14px;
      color: var(--bTextColor);
    }
  }

  .mechanism_img {
    margin-bottom: 15px;
    width: 100%;
    display: flex;
    align-items: center;
    color: var(--bTextColor);
    font-size: 14px;
    flex-wrap: wrap;

    .title {
      font-size: 14px;
      color: var(--bTextColor);
      width: 100px;
    }

    .value {
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 10px;

      .img_div {
        margin-right: 10px;
      }
    }

    video {
      width: 230px;
      height: 150px;
    }
  }
}

.flex_div {
  display: flex;
  margin-bottom: 10px;

  .label {
    min-width: 120px;
    font-size: 14px;
    background-color: rgba(240, 246, 255);
    padding: 4px 7px;

    img {
      width: 14px;
      height: 14px;
    }

    margin-right: 10px;
  }

  .value {
    color: #0094ff;
    font-weight: 400;
    font-size: 14px;
    line-height: 27px;
    cursor: pointer;

    span {
      margin-right: 30px;
    }
  }
}

:deep(.el-descriptions__body) {
  height: 100%;
}

:deep(.el-descriptions__table) {
  height: 100%;
}

.content_div_cooperationMode {
  :deep(.el-descriptions) {
    height: auto !important;
  }

  :deep(.el-descriptions__cell) {
    width: 30% !important;
  }

  .hm-form-mechanism {
    position: relative;

    .mechanism_title {
      font-weight: 500;
      font-size: 14px;
      color: #1a1b1c;
      margin-bottom: 15px;
    }

    .delete_mechanism {
      width: 20px;
      height: 20px;
      position: absolute;
      right: 10px;
      top: 50%;
      cursor: pointer;
      z-index: 50;
    }
  }
}

.switch {
  width: 172px;
  height: 30px;
  border-radius: 15px;
  border: 1px solid #0094ff;
  margin: 20px 0;
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  color: #0094ff;

  .switch_div {
    width: 50%;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }

  .switch_div_avtive {
    width: 50%;
    height: 30px;
    border-radius: 15px;
    background: #0094ff;
    text-align: center;
    line-height: 30px;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
  }
}

.pricing_information {
  // display: flex;
  // flex-wrap: wrap;

  .findings_audit_content {
    // height: 80px;
    width: 100%;
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 50px;

    .column {
      width: 100%;
      // display: flex;
      justify-content: space-between;
      align-items: flex-start;
      position: relative;

      .content {
        font-size: 14px;
        color: #0094ff;
        position: absolute;
        top: -40px;
        left: 430px;
        margin-left: 10px;
        width: 340px;
        height: 92px;
        background: #f6fcff;
        border-radius: 10px;
        flex-wrap: wrap;
        align-content: space-around;
        display: flex;
        box-sizing: border-box;
        padding-left: 20px;

        .content_flex {
          .content_flex_is {
            display: flex;
            align-items: center;
          }

          .content_div {
            margin-right: 10px;
            line-height: 1;
          }

          .content_divs {
            width: 50px;

            :deep(.el-only-child__content) {
              display: block;
              width: 100%;
              text-overflow: ellipsis;
              overflow: hidden;
              word-break: break-all;
              white-space: nowrap;
            }
          }
        }
      }

      .contents {
        font-size: 14px;
        color: #0094ff;
        position: absolute;
        top: 27px;
        left: 0px;
        margin-left: 10px;
        min-height: 70px;
        min-width: 340px;
        background: #f6fcff;
        border-radius: 10px;
        box-sizing: border-box;
        display: block;
        display: flex;
        align-items: center;

        .contents_item {
          display: flex;
          align-items: center;
          margin-left: 20px;
          margin-right: 20px;

          .reject {
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            background: #fc2540;
            border-radius: 2px;
            margin-right: 10px;
            width: 70px;
            height: 24px;
            text-align: center;
            line-height: 24px;
          }

          .consent {
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            background: #19d11b;
            border-radius: 2px;
            margin-right: 10px;
            width: 70px;
            height: 24px;
            text-align: center;
            line-height: 24px;
          }

          .reject_font {
            font-weight: 400;
            font-size: 14px;
            color: #fc2540;
            flex: 1;
          }

          .consent_font {
            font-weight: 400;
            font-size: 14px;
            color: #0094FF;
            flex: 1;
          }
        }
      }

      .column_top {
        display: flex;
        height: 18px;
        margin-left: 10px;
        position: absolute;
        top: 0;
        left: 10px;
        align-items: center;
      }

      .circle {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        margin-bottom: 100px;
        margin-top: 3px;
        border: 1px solid #109aff;
      }

      .line {
        height: calc(100% - 11px);
        position: absolute;
        border-left: 1px solid #0094ff;
        top: 13px;
        left: 5px;
      }

      .adopt_proposal {
        font-size: 14px;
        line-height: 1.4;
      }

      .adopt_proposals {
        font-size: 14px;
        line-height: 1.4;
        margin-left: 10px;
      }

      .danger_name {
        font-size: 14px;
        color: #afb6c3;
        position: absolute;
        top: 20px;
        left: 10px;
        margin-left: 10px;
      }

      .danger_date {
        font-size: 14px;
        color: #b8beca;
        margin-left: 10px;
      }
    }
  }

  .pricing_proposal {
    .el-textarea {
      display: block;
      width: 1000px;
      margin-top: 10px;
    }

    .label {
      display: flex;
      align-items: center;
      margin: 10px 0;

      .label_left {
        font-weight: 500;
        font-size: 14px;
        color: #1a1b1c;
      }

      .label_right {
        font-weight: 400;
        font-size: 14px;
        color: #afb6c3;
        margin-left: 20px;
      }
    }

    .value {
      width: 100%;

      :deep(.upload-file-uploader) {
        width: 300px;
      }
    }
  }
}
</style>